import styles from './index.less';
import CourseGrades from './components/CourseGrades';
import FourSix from './components/FourSix';
import SecondaryGrades from './components/SecondaryGrades';
import SportsGrades from './components/SportsGrades';
import React, { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { connect } from 'umi';
import { Line } from '@ant-design/plots';
import {
  Badge,
  Card,
  Col,
  Collapse,
  ConfigProvider,
  Descriptions,
  Divider,
  Row,
  Spin,
  Table,
  Typography,
  Layout,
} from 'antd';

interface DataType {
  stuName: string;
  className: string;
  majorName: string;
  stuNumber: string;
}

const GradeSummary: React.FC<any> = (props: any) => {
  const [data, setData] = useState<DataType[]>([]);
  const { Panel } = Collapse;
  useEffect(() => {
    if (props.dispatch) {
      props.dispatch({
        //路径：model的namespace+effects函数名
        type: 'Model_StudentAnalysisStudentModel/getStudentAnalysisFamilyEffects',
        payload: {
          data: '190037',
          callback: (value: any) => {
            setData(value);
          },
        },
      });
    }
  }, []);

  return (
    <Layout style={{ backgroundColor: 'white', width: '100%' }}>
      <div>
        <Card
          title={
            <span style={{ fontWeight: 'bold', fontSize: 18 }}>
              学生基本信息
            </span>
          }
        >
          <Descriptions bordered column={2}>
            <Descriptions.Item label="姓名（stuName）" span={1}>
              {data[0]?.stuName}
            </Descriptions.Item>
            <Descriptions.Item label="学号（stuNumber）" span={1}>
              {data[0]?.stuNumber}
            </Descriptions.Item>
            <Descriptions.Item label="专业（majorName）" span={1}>
              {data[0]?.majorName}
            </Descriptions.Item>
            <Descriptions.Item label="班级（className）" span={1}>
              {data[0]?.className}
            </Descriptions.Item>
          </Descriptions>
        </Card>
        <Card
          title={
            <span style={{ fontWeight: 'bold', fontSize: 18 }}>成绩汇总</span>
          }
        >
          <div className={styles.content}>
            <ul className={styles.list}>
              <li className={styles.item}>
                <p className={styles.text}>课程成绩</p>
                <p className={styles.tb}>
                  <CourseGrades />
                </p>
              </li>
              <li className={styles.item}>
                <p className={styles.text}>二课成绩</p>
                <p className={styles.tb}>
                  <SecondaryGrades />
                </p>
              </li>
              <li className={styles.item}>
                <p className={styles.text}>四六级成绩</p>
                <p className={styles.tb}>
                  <FourSix />
                </p>
              </li>
              <li className={styles.item}>
                <p className={styles.text}>体测成绩</p>
                <p className={styles.tb}>
                  <SportsGrades />
                </p>
              </li>
            </ul>
          </div>
        </Card>
      </div>
    </Layout>
  );
};
export default connect(({ Model_StudentAnalysisStudentModel }: any) => ({
  Model_StudentAnalysisStudentModel,
}))(GradeSummary);
